<template>
	<view class="content">
		<sub-tab :tabs="tabs" @change="changeIndex" :selectIndex="selectIndex"></sub-tab>
		<view class="list">
			<view class="tishi">{{$t('Reset password tip')}}</view>
			<view v-if="selectIndex==0" class="list-call">
				<!-- <image class="img" src="/static/shilu-login/1.png"></image> -->
				<!-- <input class="zonecode" v-model="countrycode" maxlength="5" placeholder="Code" @tap="showcode()" /> -->
				<input class="sl-input" type="number" v-model="phone" maxlength="11"
					:placeholder="this.$t('form.mobile')" />
			</view>
			<view class="list-call" v-else>
				<!-- <image class="img" src="/static/shilu-login/1.png"></image> -->
				<input class="sl-input" v-model="emailForm.email" type="email" :placeholder="this.$t('form.email')" />
			</view>
			<view class="list-call">
				<!-- <image class="img" src="/static/shilu-login/2.png"></image> -->
				<input class="sl-input" type="text" v-model="password" :placeholder="this.$t('form.newpassword')"
					:password="!showPassword" />
				<image class="img" :src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'"
					@tap="display"></image>
			</view>
			<view v-if="selectIndex==0" class="list-call">
				<!-- <image class="img" src="/static/shilu-login/3.png"></image> -->
				<input class="sl-input" type="number" v-model="code" maxlength="6"
					:placeholder="this.$t('form.code')" />
				<view class="yzm" :class="{ yzms: second>0 }" @tap="getcode">{{yanzhengma}}</view>
			</view>
			<view v-else class="list-call">
				<input class="sl-input" v-model="emailForm.captcha" type="email" :placeholder="this.$t('form.code')" />
				<view class="yzm" :class="{ yzms: emailSecond>0 }" @tap="getEmailcode">{{emailyanzhengma}}</view>
			</view>
		</view>
		<view class="button-login" hover-class="button-hover" @tap="selectIndex == 0 ? bindLogin() :bindEmailLogin() ">
			<text>{{$t('Reset password')}}</text>
		</view>
		<uni-popup ref="codelist" type="bottom">
			<view class="codelist box pd15">
				<scroll-view :scroll-y="true" style="height: 500rpx;">
					<block v-for="(item,index) in codelist" :key="index">
						<view class="flex space pd15 bd-bottom" @tap="selcode(item.telcode)">
							<text class="name">{{item.lang_name}}</text>
							<text class="code mr15">+{{item.telcode}}</text>
						</view>
					</block>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _this, js;
	export default {
		data() {
			return {
				tabs: [this.$t('Phone number'), this.$t('Email')],
				selectIndex: 0,
				countrycode: '',
				codelist: [],
				phone: '',
				second: 0,
				code: "",
				showPassword: false,
				password: '',
				email: '',
				emailSecond: 0,
				emailForm: {
					email: '',
					event: 'register',
					captcha: '',
					password: ''
				}
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('Reset password')
			});
		},
		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return this.$t('form.getcode');
				} else {
					if (this.second < 10) {
						return this.$t('form.getcodeagain') + '0' + this.second;
					} else {
						return this.$t('form.getcodeagain') + this.second;
					}
				}
			},
			emailyanzhengma() {
				if (this.emailSecond == 0) {
					return this.$t('form.getcode');
				} else {
					if (this.emailSecond < 10) {
						return this.$t('form.getcodeagain') + '0' + this.emailSecond;
					} else {
						return this.$t('form.getcodeagain') + this.emailSecond;
					}
				}
			}
		},
		onLoad() {
			this.nationcode()
		},
		onUnload() {
			this.clear()
		},
		methods: {
			changeIndex(index) {
				this.selectIndex = index;
			},
			display() {
				this.showPassword = !this.showPassword
			},
			async nationcode() {
				var data = {}
				let [err, res] = await this.$httpas.post('/api/index/nationcode', data);
				if (res.data.code == 1) {
					this.codelist = res.data.data
					this.countrycode = '+' + this.codelist[0].telcode
				}
			},
			showcode() {
				this.$refs.codelist.open('bottom');
			},
			selcode(code) {
				this.countrycode = '+' + code;
				this.$refs.codelist.close();
			},
			clear() {
				clearInterval(js)
				js = null
				this.second = 0
			},
			async getcode() {
				if (this.phone.length < 4) {
					uni.showToast({
						icon: 'none',
						title: this.$t('form.mobile')
					});
					return;
				}
				if (this.second > 0) {
					return;
				}

				// 请求服务器，发送验证码
				var data = {
					'mobile': this.phone,
					'event': 'resetpwd',
					'countrycode': this.countrycode
				}
				let [err, res] = await this.$httpas.post('/api/sms/send', data);
				if (!this.$httpas.errorCheck(err, res)) return;
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
					this.second = 60;
					//请求业务
					js = setInterval(() => {
						this.second--;
						if (this.second == 0) {
							this.clear()
						}
					}, 1000);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			async getEmailcode() {
				let email = this.emailForm.email
				if (!email) {
					uni.showToast({
						icon: 'none',
						title: this.$t('form.mobile')
					});
					return;
				}
				if (this.emailSecond > 0) {
					return;
				}

				// 请求服务器，发送验证码
				var data = {
					email,
					'event': 'resetpwd',
				}
				let [err, res] = await this.$httpas.post('/api/ems/send', data);
				if (!this.$httpas.errorCheck(err, res)) return;
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
					this.emailSecond = 60;
					//请求业务
					js = setInterval(() => {
						this.emailSecond;
						if (this.emailSecond == 0) {
							this.clear()
						}
					}, 1000);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			async bindLogin() {
				if (this.phone.length < 4) {
					uni.showToast({
						icon: 'none',
						title: this.$t('Mobile is incorrect')
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: this.$t('Password is incorrect')
					});
					return;
				}
				var data = {
					'mobile': this.phone,
					'event': 'resetpwd',
					'captcha': this.code,
					'countrycode': this.countrycode
				}
				let [err, res] = await this.$httpas.post('/api/sms/check', data);
				if (!this.$httpas.errorCheck(err, res)) return;
				if (res.data.code == 0) {
					uni.showToast({
						title: this.$t('Smscode is incorrect'),
						icon: "none"
					});
					return false;
				}
				this.resetpwd();
			},
			async bindEmailLogin() {
				if (this.emailForm.email.length < 4) {
					uni.showToast({
						icon: 'none',
						title: this.$t('Email is incorrect')
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: this.$t('Password is incorrect')
					});
					return;
				}
				var data = {
					'email': this.emailForm.email,
					'event': 'resetpwd',
					type: 'email',
					username: this.emailForm.email,
					'captcha': this.emailForm.captcha,
					'countrycode': ''
				}
				let [err, res] = await this.$httpas.post('/api/ems/check', data);
				if (!this.$httpas.errorCheck(err, res)) return;
				if (res.data.code == 0) {
					uni.showToast({
						title: this.$t('Smscode is incorrect'),
						icon: "none"
					});
					return false;
				}
				this.resetEmailpwd();
			},
			async resetpwd() {
				let _this = this;
				let data = {
					'mobile': this.phone,
					'type': 'mobile',
					'newpassword': this.password,
					'captcha': this.code,
					'countrycode': this.countrycode
				};
				let [err, res] = await this.$httpas.post('/api/user/resetpwd', data);
				if (!this.$httpas.errorCheck(err, res)) return;

				if (res.data.code === 1) {
					uni.showModal({
						title: this.$t('Warning'),
						content: res.data.msg,
						showCancel: false,
						confirmText: this.$t('OK'),
						success: function(ret) {
							if (ret.confirm) {
								uni.navigateTo({
									url: 'login'
								})
							}
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			async resetEmailpwd() {
				let _this = this;
				let data = {
					'email': this.emailForm.email,
					'type': 'email',
					'newpassword': this.password,
					'captcha': this.emailForm.captcha,
					'countrycode': ''
				};
				let [err, res] = await this.$httpas.post('/api/user/resetpwd', data);
				if (!this.$httpas.errorCheck(err, res)) return;

				if (res.data.code === 1) {
					uni.showModal({
						title: this.$t('Warning'),
						content: res.data.msg,
						showCancel: false,
						confirmText: this.$t('OK'),
						success: function(ret) {
							if (ret.confirm) {
								uni.navigateTo({
									url: 'login'
								})
							}
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tishi {
		color: #999999;
		font-size: 28rpx;
		line-height: 50rpx;
		margin-bottom: 50rpx;
	}

	.zonecode {
		width: 80rpx;
		margin-left: 16rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #FF6C89 0%, #FFB163 98%);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: linear-gradient(270deg, #FF6C89 0%, #FFB163 98%);
	}

	.yzm {
		color: #FF7D13;
		font-size: 24rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: auto;
		height: 64rpx;
		border: 1rpx solid rgba(255, 131, 30, 1);
		border-radius: 50rpx;
	}

	.yzms {
		color: #999999 !important;
		border: 1rpx solid #999999;
	}
</style>